import Logo from '@/assets/logo.svg';
import {Link, useModel, useNavigate} from '@@/exports';
import {IdcardOutlined, PhoneOutlined, UserOutlined } from '@ant-design/icons';
import { LoginForm, ProFormText, ProFormUploadButton } from '@ant-design/pro-components';
import {message, UploadProps} from 'antd';
import { useSearchParams,history } from 'umi';
import {PostType} from "@/models/post";
import {uploadImage} from "@/services/fileService";
import {userLogin, userRegister, userVerify} from "@/services/userService";
import {Simulate} from "react-dom/test-utils";
import error = Simulate.error;


const query = {
    frontImg:"",
    backImg:""
}

const frontImgUpload = (options: any) => {
    console.log(options.file)
    let formData = new FormData();
    formData.append("file", options.file);

    const data: PostType.PostPhotoRequest = {
        biz: 'user_avatar',
        file: formData.get("file")
    }

    uploadImage(data).then(res => {
        query.frontImg = res.data;
        options.onSuccess(res, options.file);
    }).catch(err => {
        console.log(err)
        options.onError(err)
    });
}

const frontImgProps: UploadProps = {
    headers: {
        'Content-Type': 'multipart/form-data;charset=UTF-8',
    },
    customRequest: frontImgUpload
}

const backImgUpload = (options: any) => {
    console.log(options.file)
    let formData = new FormData();
    formData.append("file", options.file);

    const data: PostType.PostPhotoRequest = {
        biz: 'user_avatar',
        file: formData.get("file")
    }

    uploadImage(data).then(res => {
        query.backImg = res.data;
        options.onSuccess(res, options.file);
    }).catch(err => {
        console.log(err)
        options.onError(err)
    });
}

const backImgProps: UploadProps = {
    headers: {
        'Content-Type': 'multipart/form-data;charset=UTF-8',
    },
    customRequest: backImgUpload
}

/**
 * 用户实名认证
 */
export default () => {
    // const [searchParams] = useSearchParams();
    //
    const { initialState, setInitialState } = useModel('@@initialState');

    const navigate = useNavigate();

    /**
     * 实名认证
     * @param fields
     */
    const doUserVerify = async (fields: UserType.UserVerifiedRequest)=>{
        fields.frontImg = query.frontImg;
        fields.backImg = query.backImg;
        if(fields.frontImg.length===0||fields.backImg.length===0){
            message.error("身份证图片不能为空")
        }
        const hide = message.loading('实名认证中');
            await userVerify(fields).then(res=>{
                if(res.success===true){
                    message.success('实名认证成功');
                    // 转到注册页面
                    navigate('/user/register', {
                        replace: true,
                    });
                }else{
                    message.error("实名认证失败")
                }

            }).catch(e=>{
                message.error(e.message)
            }).finally(()=>{
                hide()
            })
    }

    return (
        <div
            style={{
                height: '100vh',
                background:
                    'url(https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png)',
                backgroundSize: '100% 100%',
            }}
        >
            <LoginForm<UserType.UserVerifiedRequest>
                logo={Logo}
                title="大学秀"
                subTitle="实名认证"
                submitter={{
                    searchConfig: {
                        submitText: '认证',
                    },
                }}
                onFinish={async (formData) => {
                    await doUserVerify(formData);
                }}
            >
                <>
                    <ProFormText
                        name="userName"
                        fieldProps={{
                            size: 'large',
                            prefix: <UserOutlined className={'prefixIcon'} />,
                        }}
                        placeholder={'请输入真实姓名'}
                        rules={[
                            {
                                required: true,
                                message: '请输入账号!',
                            },
                        ]}
                    />
                    <ProFormText
                        name="phoneNo"
                        fieldProps={{
                            size: 'large',
                            prefix: <PhoneOutlined className={'prefixIcon'}/>,
                        }}
                        placeholder={'请输入电话号码'}
                        rules={[
                            {
                                required: true,
                                message: '请输入电话号码!',
                            },
                        ]}
                    />

                    <ProFormText
                        name="idNumber"
                        fieldProps={{
                            size: 'large',
                            prefix: <IdcardOutlined />,
                        }}
                        placeholder={'请输入身份证号'}
                        rules={[
                            {
                                required: true,
                                message: '请输入身份证号!',
                            },
                        ]}
                    />

                    <ProFormUploadButton
                        name="frontImg"
                        title="点击上传身份证正面"
                        max={1}
                        fieldProps={{
                            ...frontImgProps,
                        }}
                    />

                    <ProFormUploadButton
                        name="backImg"
                        title="点击上传身份证反面"
                        max={1}
                        fieldProps={{
                            ...backImgProps,
                        }}
                    />
                </>

                <div
                    style={{
                        marginBottom: 30,
                    }}
                >
                    <Link
                        to="/user/login"
                        style={{
                            float: 'left',
                            marginBottom: 20,
                        }}
                    >
                        返回登录页面
                    </Link>
                </div>
            </LoginForm>
        </div>
    );
};
